<template>
<div class="content">
    <div class="info-box">
        <div class="steps-box">
            <el-steps :active="3" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="品类/尺寸"></el-step>
                <el-step title="盒型"></el-step>
                <el-step title="色系"></el-step>
                <el-step title="包装体现"></el-step>
                <el-step title="工艺"></el-step>
            </el-steps>
        </div>
        

        <el-form ref="form" :model="prodictInfo" label-width="80px" label-position="top" :rules="regRules">
            <el-form-item label="主体颜色" class="color"  prop="color">
                <el-radio-group v-model="prodictInfo.color">  
                    <el-radio  :label="item.dictValue" v-for="(item,index) in colorData" :key="index" class="option-content">
                        <div v-if="item.imgPath" >
                            <img  :src="basePath + item.imgPath" class="option-image" />
                            <p class="option-text">{{ item.dictLabel }}</p>
                        </div>
                        <div v-else>
                            <el-upload
                                class="custom-color"
                                :action="basePath + '/common/upload'"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess">
                                <img v-if="imageUrl" :src="imageUrl" class="option-image">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <p class="option-text">{{ item.dictLabel }}</p>
                        </div>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="主题颜色占比" class="color_proportion" prop="colorProportion">
                <el-radio-group v-model="prodictInfo.colorProportion">

                    <el-radio  :label="item.dictValue" v-for="(item,index) in colorProportionData" :key="index" class="option-content">
                        <div v-if="item.imgPath" >
                            <img  :src="basePath + item.imgPath" class="option-image" />
                            <p class="option-text">{{ item.dictLabel }}</p>
                        </div>
                        <div v-else>
                            {{ item.dictLabel }}
                        </div>
                    </el-radio>
                </el-radio-group>
                <el-form-item v-if="prodictInfo.colorProportion === '3'"  prop="colorProportionCustomize">
                    <el-input v-model="prodictInfo.colorProportionCustomize"  style="width:80%"></el-input>
                </el-form-item>
            </el-form-item>
            <el-form-item label="风格" prop="style">
                <el-radio-group v-model="prodictInfo.style" class="radio-group">
                    <el-radio v-for="(item,index) in styleData" :key="index" :label=item.dictValue>
                        {{item.dictLabel}}
                        <div v-if="item.imgPath"  class="show-box">
                            <img v-for="(item,index) in item.imgPath" :key="index" :src="basePath + item" class="show-image" />
                        </div>
                    </el-radio>
                </el-radio-group>
                <el-form-item v-if="prodictInfo.style === '5'"  prop="styleCustomize">
                    <el-input v-model="prodictInfo.styleCustomize" style="width:80%"></el-input>
                </el-form-item>
            </el-form-item>
        </el-form>
        <div class="button-box">
            <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
    </div> 
</div>
</template>

<script>
import 'core-js/actual/array/for-each';
import {getDicts} from "@/api/design/dict/data";

import 'core-js/actual/array/from';
import 'core-js/actual/array/find';
export default {
    data() {
        return {
			productDictVo:{
				list:[],
				parentId:null
			},
            colorData:[],
            colorProportionData:[],
            styleData:[],
            prodictInfo:{},
            imageUrl: '',
            basePath:process.env.VUE_APP_BASE_API,
            regRules:{
                color: [
                    { required: true, message: '请选择主体颜色', trigger: 'blur' },
                    {
                        validator:(rule,value,callback) => {
                            if (value === '7' && !this.imageUrl) {
                                callback(new Error('请上传图片'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur' 
                    }
                ],
                colorProportion: [
                    { required: true, message: '请选择主题颜色占比', trigger: 'blur' },
                    { 
                        validator: (rule, value, callback) => {
                            if (value === '3' && !this.prodictInfo.colorProportionCustomize) {
                                callback(new Error('请输入自定义主题颜色占比'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur' 
                    }
                ],
                style: [
                    { required: true, message: '请选择风格', trigger: 'change' },
                    { 
                        validator: (rule, value, callback) => {
                            if (value === '5' && !this.prodictInfo.styleCustomize) {
                                callback(new Error('请输入自定义风格'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur' 
                    }
                ]
            }
        }
    },
    methods: {
        handleAvatarSuccess(res) {
            this.imageUrl = res.url
        },
        nextStep(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$router.push(
                        {
                            path:'/pack', 
                            query: {
                                userName: this.prodictInfo.userName,
                                sex:this.prodictInfo.sex,
                                age:this.prodictInfo.age,
                                solarFilm:this.prodictInfo.solarFilm,
                                solarFilmSize:this.prodictInfo.solarFilmSize,
                                colorChangeFilm:this.prodictInfo.colorChangeFilm,
                                colorChangeFilmSize:this.prodictInfo.colorChangeFilmSize,
                                lacquerFilm:this.prodictInfo.lacquerFilm,
                                lacquerFilmSize:this.prodictInfo.lacquerFilmSize,
                                boxType:this.prodictInfo.boxType,
                                color:this.prodictInfo.color,
                                colorCustomize:this.imageUrl,
                                colorProportion:this.prodictInfo.colorProportion,
                                colorProportionCustomize:this.prodictInfo.colorProportionCustomize,
                                style:this.prodictInfo.style,
                                styleCustomize:this.prodictInfo.styleCustomize

                            }
                        }
                    )
                }
            })


            
        }
    },
    created() {
        this.prodictInfo.userName = this.$route.query.userName
        this.prodictInfo.sex = this.$route.query.sex
        this.prodictInfo.age = this.$route.query.age
        this.prodictInfo.solarFilm = this.$route.query.solarFilm
        this.prodictInfo.solarFilmSize = this.$route.query.solarFilmSize
        this.prodictInfo.colorChangeFilm = this.$route.query.colorChangeFilm
        this.prodictInfo.colorChangeFilmSize = this.$route.query.colorChangeFilmSize
        this.prodictInfo.lacquerFilm = this.$route.query.lacquerFilm
        this.prodictInfo.lacquerFilmSize = this.$route.query.lacquerFilmSize
        this.prodictInfo.boxType = this.$route.query.boxType
		this.productDictVo.list.push("color","color_proportion","style")
		this.productDictVo.parentId=0
        getDicts(this.productDictVo).then(res => {
			this.colorData= res.data.filter(item => item.dictType === 'color')
            this.colorProportionData= res.data.filter(item => item.dictType === 'color_proportion')
			this.styleData= res.data.filter(item => item.dictType === 'style')
			console.log(this.styleData)
			// 安全处理 imgPath 并检查是否包含逗号
			this.styleData.forEach(item => {
			  if (typeof item.imgPath === 'string' && item.imgPath.includes(',')) {
				item.imgPath = item.imgPath.split(',').filter(path => path.trim() !== '');
			  } else if (typeof item.imgPath === 'string') {
				item.imgPath = [item.imgPath]; // 如果不包含逗号，转换为单元素数组
			  } else {
				item.imgPath = []; // 处理 null 或 undefined 情况
			  }
			});
        })
        // getDicts('color_proportion').then(res => {
        //     this.colorProportionData = res.data
        // })
        // getDicts('style').then(res => {
        //     this.styleData = res.data
        //     this.styleData.forEach(style => {
        //         if(style.imgPath){
        //             let result = style.imgPath.split(",");
        //             style.imgPath = result
        //         }
                
        //     })
        // })
    },
}
</script>

<style scoped>
.content{
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
.info-box{
    margin-top: 20px;
}
.steps-box{
    margin-bottom: 50px;
}
::v-deep .el-step__title{
    font-size: 14px;
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.button-box{
    display: flex;
    justify-content: center;
    margin-top: 10%;
    padding-bottom: 10%;
}

.option-content {
  text-align: center;
}

.option-image {
  width: 70px;
  height: 70px;
}

.show-box{
    display: flex;
    justify-content: space-between;
}
.show-image {
  width: 70px;
  height: 70px;
}

.option-text {
  margin-top: 10px;
}

.custom-color{
    width: 70px;
    height: 70px;
    border: 1px dashed #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
  }

::v-deep .el-form-item {
    margin:0 10px;
}

::v-deep .color .el-radio__inner {
    display: none;
}

::v-deep .color_proportion .el-radio__inner {
    display: none;
}

.el-form-item{
    margin-bottom: 10px;
}
</style>